import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, AutoComplete, DatePicker, Icon, Input, Button, Select, Alert, Row, Col } from 'antd';
import { soldSearch, commodityQuery } from '@/services/user';
import { connect } from 'dva';
const { TextArea } = Input;
const { Option } = Select;
import styles from './styles.less';

export default class Buy extends React.Component<any, any> {
  state = {
    unit: 'bottle',
    scale: '0.4',
    personData: [],
    commodityData: [],
  };

  handleSelect = value => {
    this.setState({
      unit: value,
    });
  };
  fetchPerson = () => {};
  handleSubmit = e => {
    e.preventDefault();
    const { unit } = this.state;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values, 8888);
        this.props.dispatch({
          type: 'buy/submit',
          payload: {
            type: 0,
            dealTime: new Date(values.dealTime).getTime(),
            quantityComments: unit,
            companyPrice: Number(values.companyPrice),
            companyProfitProportion: Number(values.companyProfitProportion),
            freight: Number(values.freight),
            quantity: Number(values.quantity),
            staffId: Number(values.staffId),
            staffPrice: Number(values.staffPrice),
            wineId: Number(values.wineId),
          },
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { unit, scale, personData, commodityData } = this.state;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    const formTailLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 8, offset: 4 },
    };
    const selectAfter = (
      <Select defaultValue={unit} onChange={this.handleSelect} style={{ width: 55 }}>
        <Option value="bottle">瓶</Option>
        <Option value="box">箱</Option>
      </Select>
    );
    const Desc = (
      <div style={{ fontSize: '14px' }}>
        <span style={{ color: 'red' }}>*买入时利润计算公式:</span>
        <p>((公司核定买入价-购买人买入价)*数量 — 其他费用)/2</p>
        <span style={{ color: 'red' }}>*其它费用:</span>
        <p> 是车油费、路费等费用的总和.</p>
        <span style={{ color: 'red' }}>*利润分成比:</span>
        <p>例， 4:6 是指个人利润占总利润的40%，公司利润占总利润的60% </p>
      </div>
    );
    const data = ['茅台', '汾酒', '竹叶青'];
    return (
      <PageHeaderWrapper>
        <Row>
          <Col span={14}>
            <Form {...formItemLayout} onSubmit={this.handleSubmit} className={styles.formcontain}>
              <Form.Item label={'人员'}>
                {getFieldDecorator('staffId', {
                  rules: [{ required: true, message: '请输入工作人员' }],
                })(
                  <Select
                    showSearch
                    // value={value}
                    placeholder="请输入工作人员"
                    // notFoundContent={fetching ? <Spin size="small" /> : null}
                    filterOption={false}
                    onSearch={value => {
                      soldSearch({ comments: value }).then(res => {
                        if (res.status == 200) {
                          this.setState({
                            personData: res.data,
                          });
                        } else {
                          this.setState({
                            personData: [],
                          });
                        }
                      });
                    }}
                    onChange={() => {}}
                  >
                    {personData.length > 0
                      ? personData.map((item, index) => (
                          <Option key={item.id}>
                            {item.name}/{item.phoneNumber}
                          </Option>
                        ))
                      : null}
                  </Select>,
                )}
              </Form.Item>
              <Form.Item label={'商品名'}>
                {getFieldDecorator('wineId', {
                  rules: [{ required: true, message: '请输入商品' }],
                })(
                  <Select
                    showSearch
                    // value={value}
                    placeholder="请输入商品"
                    // notFoundContent={fetching ? <Spin size="small" /> : null}
                    filterOption={false}
                    onSearch={value => {
                      commodityQuery({ comments: value }).then(res => {
                        if (res.status == 200) {
                          this.setState({
                            commodityData: res.data,
                          });
                        } else {
                          this.setState({
                            commodityData: [],
                          });
                        }
                      });
                    }}
                    onChange={() => {}}
                  >
                    {commodityData.length > 0
                      ? commodityData.map((item, index) => (
                          <Option key={item.id}>
                            {item.name}/{item.comments}
                          </Option>
                        ))
                      : null}
                  </Select>,
                )}
              </Form.Item>
              <Form.Item label={'公司核定单价'}>
                {getFieldDecorator('companyPrice', {
                  rules: [
                    { required: true, pattern: /^[1-9]\d*$/, message: '请输入正确的商品核定单价' },
                  ],
                })(<Input prefix="￥" suffix="RMB" placeholder="请输入商品核定单价" />)}
              </Form.Item>
              <Form.Item label={'购入单价'}>
                {getFieldDecorator('staffPrice', {
                  rules: [
                    { required: true, pattern: /^[1-9]\d*$/, message: '请输入正确的商品购入单价' },
                  ],
                })(<Input prefix="￥" suffix="RMB" placeholder="请输入商品购入单价" />)}
              </Form.Item>
              <Form.Item label={'数量'}>
                {getFieldDecorator('quantity', {
                  rules: [{ required: true, pattern: /^[1-9]\d*$/, message: '请输入正确的数量' }],
                  validateFirst: true,
                })(<Input placeholder="请输入数量" addonAfter={selectAfter} />)}
              </Form.Item>
              <Form.Item label={'其它费用'}>
                {getFieldDecorator('freight', {
                  rules: [{ pattern: /^[1-9]\d*$/, message: '请输入正确的运费' }],
                })(<Input prefix="￥" suffix="RMB" placeholder="请输入运费" />)}
              </Form.Item>
              <Form.Item label={'其它费用'}>
                {getFieldDecorator('freight', {
                  rules: [{ pattern: /^[1-9]\d*$/, message: '请输入正确的费用' }],
                })(<Input prefix="￥" suffix="RMB" placeholder="请输入其它费用" />)}
              </Form.Item>
              <Form.Item label={'利润分成比'}>
                {getFieldDecorator('companyProfitProportion', {
                  initialValue: '0.4',
                  rules: [{ required: true }],
                })(
                  <Select>
                    <Option value="0.4">4:6</Option>
                    <Option value="0.5">5:5</Option>
                    <Option value="0.6">6:4</Option>
                  </Select>,
                )}
              </Form.Item>
              <Form.Item label={'成交时间'}>
                {getFieldDecorator('dealTime', {
                  rules: [{ required: true, message: '请选择成交时间' }],
                })(<DatePicker showTime />)}
              </Form.Item>
              <Form.Item label={'备注'}>
                {getFieldDecorator('comments')(<TextArea rows={4} />)}
              </Form.Item>
              <div>
                <Button
                  type="primary"
                  size="large"
                  htmlType="submit"
                  style={{ margin: '0 30px 0 120px' }}
                >
                  提交
                </Button>
                <Button type="ghost" size="large" htmlType="submit">
                  取消
                </Button>
              </div>
            </Form>
          </Col>
          <Col span={8}>
            <Alert
              message={
                <p style={{ color: '#1890FF', fontWeight: 'bold', marginBottom: '10px' }}>
                  备注说明
                </p>
              }
              description={Desc}
              type="info"
            />
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}
